<!-- 防抖节流 -->
<template>
    <div>
        <!-- 自定义防抖节流 -->
        <div class="">自定义防抖节流</div>
        <!-- 设定一个定时器， 事件在该时间内再次被触发，刷新定时器，直到最后一次触发才会触发该事件-->
        <button @click="debounce_diy()">防抖debounce</button>
        <!-- 在规定时间内，无论触发多少次事件，只会触发一次。 -->
        <button @click="throttle_diy()">节流throttle</button>

        <!-- 使用loadsh的方法 -->
        <div>使用loadsh的方法</div>
        <button @click="testD()">防抖</button>
        <button @click="testT()">节流</button>
    </div>
</template>

<script>
import debounce from 'lodash/debounce'
import throttle from 'lodash/throttle'
export default {
    data() {
        return {
            timeD: 0,

            lastTime: new Date()
        }
    },

    methods: {
        // 防抖，在半秒内再次触发会刷新定时器
        debounce_diy() {
            if (this.timeD) {
                clearTimeout(this.timeD)
            }
            this.timeD = setTimeout(() => {
                console.log('防抖操作，发送api请求')
            }, 500)
        },

        // 节流，在一秒内只会执行一次
        throttle_diy() {
            let now = new Date()
            if (now - this.lastTime > 2000) {
                console.log('节流操作，发送api请求')
                this.lastTime = now
            }
        },

        testD: debounce(() => {
            console.log('防抖函数执行')
        }, 1000),

        testT: throttle(() => {
            console.log('节流函数执行')
        }, 2000)
    }
}
</script>

<style lang="scss" scoped></style>
